<template>
  <div class="userScore">
    <div class="newsCenter">
      <div class="newsheader flexs">
        <span class="iconfont icon-left1 ico1" onclick="javascript:history.go(-1);"></span>
        <p class="headerText">我的积分</p>
        <span class="iconfont icon-calender ico2" @click.stop="calInit"></span>
      </div>
      <div class="newsContent">
        <div class="userInfo">
          <p class="p1">积分总额</p>
          <p class="p2">{{itemScore}}</p>
        </div>
      </div>
      <div class="rankList">
        <div class="rankListItem" v-for="(item,index) in rankListItem">
          <p class="flexs t1">
            <span class="operate">{{item.type}}</span>
            <span class="date">{{item.ctime}}</span>
          </p>
          <a class="flex t2">
            <span class="rankTitle flex1">{{item.name}}</span>
            <span class="rankScore">+{{item.score}}</span>
          </a>
        </div>
      </div>
    </div>
    <!--加载更多-->
    <div class="loadComponent">
      <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips" >正在加载</span>
      </div>
      <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
        <span class="weui-loadmore__tips">到底了</span>
      </div>
      <div class="loadMore" style="display:block" @click.stop="loadMore" v-if="moreData">
        更多
      </div>
    </div>
    <div id="loadingToast" v-if="showLoading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
    <div class="noData" v-if="noData">
      <img src="https://api.cloudcpc.com/static/index/images/noData.png" alt="">
    </div>
  </div>
</template>

<script>
  import weui from '../../../static/js/weui.js'
  import {mapState} from 'vuex'
  export default({
    data(){
        return {
          str:'',
          defaultPage:1,
          rankListItem:[],
          itemScore:'',
          nomoreData:false,
          loadmoreClick:false,
          moreData:true,
          showLoading:true,
          noData:false
        }
    },
    methods:{
        calInit(){
            let that =this
          weui.datePicker({
            start: 1989,
            end: new Date().getFullYear(),
            defaultValue: [new Date().getFullYear(), new Date().getMonth() * 1 + 1],
            endMonth: new Date().getMonth() * 1,
            onChange: function (result) {
//              console.log(result)
            },
            onConfirm: function (result) {
              that.rankListItem =[]
              that.defaultPage =1
              var year = result[0];
              var month = result[1];
              var time = year + '-' + month;
              that.str =time
              that.initData(that.str)
            }
          })
        },
      initData(str){
        this.noData =false
          this.axios.get('/home/User/getMyScoreDetail?'+`${this.baseUrl}`,{
              params:{
                  uid:this.uid,
                  p:this.defaultPage,
                  pageSize:6,
                  time:this.str,
              }
          })
            .then((res)=>{
              if(res.data.code==1){
                  this.showLoading =false
//                  console.log(res.data.data.data.length)
                  if(res.data.data.data.length>0){
                    this.itemScore =res.data.data.total_score
                    this.rankListItem.push(...res.data.data.data)
                  }else{
                      if(this.defaultPage==1){
                          this.noData =true
                          this.nomoreData=false
                          this.loadmoreClick =false
                      }else{
                        this.nomoreData=true
                        this.loadmoreClick =false
                      }

                  }


              }
            })
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
        this.moreData =false
        this.defaultPage ++
        this.initData(this.str)
      },
    },
    mounted(){
      this.str =new Date().getUTCFullYear()+'-'+(new Date().getMonth()*1+1)
          this.initData(this.str)
    },
    computed:{
      ...mapState({
        uid:state=>state.app.loginState.uid||localStorage.getItem('uid')
      })
    }

  })

</script>
<style scoped>
  .userScore{
    width: 100%;
    height: 100%;
  }
  .noData{
    width: 100%;
    height: calc( 100% - 4rem );
  }
  .noData img{
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 200px;
  }
  .newsCenter{
    background: #fff;
  }
  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .newsCenter .newsheader{
    padding: 0 0.32rem;
    height: 0.8rem;
    line-height: 0.8rem;
    justify-content: space-around;
    background: #e83329;
  }
  .newsCenter .newsheader .headerText{
    font-size: 0.32rem;
    color: white;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .newsCenter .newsheader .iconfont{
    font-size :0.36rem;
    color:white;
    width: 0.5rem;

  }
  .newsContent{
    height: 3.52rem;
    background-image: url(../../../static/images/rank.png);
    background-position: 0 0 ;
    background-repeat: no-repeat;
    background-size: 7.5rem 3.58rem;
    margin-top: -0.8rem;
    overflow: hidden;
    background-color: white;
  }
  .userInfo{
    margin-left: 0.8rem;
    margin-top:1.34rem;

  }
  .userInfo .p1{
    font-size: 0.28rem;
    color: white;
  }
  .userInfo .p2{
    font-size: 0.66rem;
    color: white;
  }
  .rankList{
    padding: 0 .32rem;

  }
  .rankList .rankListItem{
    border-bottom: 1px solid  #f6f5f5;
    padding: 0.25rem 0;

  }
  .rankListItem .t1{
    justify-content: space-between;
    margin-bottom: 0.15rem;
  }
  .operate{
    color: #474646;
    font-size: 0.3rem;
  }
  .date{
    color: #adacac;
    font-size: 0.24rem;
  }
  .rankListItem .t2{
    justify-content: space-between
  }
  .rankListItem .rankTitle{
    font-size: 0.3rem;
    color: #adacac;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify;

  }
  .rankListItem .rankScore{
    display: inline-block;
    width: 0.5rem;
    color: #ed5b53;
    font-size: 0.26rem;
    text-align: right;
  }
</style>
